<template>
  <view class="bottom-nav" :class="{ 'bottom-nav--fixed': fixed }">
    <view class="bottom-nav__container">
      <view 
        v-for="(item, index) in navItems" 
        :key="index"
        class="bottom-nav__item"
        :class="{ 'bottom-nav__item--active': currentIndex === index }"
        @click="handleNavClick(index, item)"
      >
        <view class="bottom-nav__icon">
          <image 
            v-if="currentIndex === index && item.selectedIcon"
            :src="item.selectedIcon" 
            class="bottom-nav__icon-img"
            mode="aspectFit"
          />
          <image 
            v-else-if="item.icon"
            :src="item.icon" 
            class="bottom-nav__icon-img"
            mode="aspectFit"
          />
          <text 
            v-else 
            class="bottom-nav__icon-text"
            :class="{ 'bottom-nav__icon-text--active': currentIndex === index }"
          >
            {{ item.iconText }}
          </text>
        </view>
        <text 
          class="bottom-nav__text"
          :class="{ 'bottom-nav__text--active': currentIndex === index }"
        >
          {{ item.text }}
        </text>
        <!-- 徽章 -->
        <view v-if="item.badge" class="bottom-nav__badge">
          <text class="bottom-nav__badge-text">{{ item.badge }}</text>
        </view>
        <!-- 红点 -->
        <view v-if="item.dot" class="bottom-nav__dot"></view>
      </view>
    </view>
    <!-- 安全区域占位 -->
    <view class="bottom-nav__safe-area"></view>
  </view>
</template>

<script>
import routerManager from '../../utils/router.js'

export default {
  name: 'BottomNav',
  props: {
    // 导航项数据
    items: {
      type: Array,
      default: () => []
    },
    // 当前激活的索引
    current: {
      type: Number,
      default: 0
    },
    // 是否固定定位
    fixed: {
      type: Boolean,
      default: true
    },
    // 是否显示安全区域
    safeArea: {
      type: Boolean,
      default: true
    },
    // 主题色
    theme: {
      type: String,
      default: 'blue' // blue, orange, green, purple
    }
  },
  data() {
    return {
      currentIndex: this.current
    }
  },
  computed: {
    navItems() {
      return this.items.length > 0 ? this.items : this.defaultItems
    },
    defaultItems() {
      return [
        {
          text: '首页',
          iconText: '🏠',
          pagePath: '/pages/index/index',
          selectedIcon: '',
          badge: '',
          dot: false
        },
        {
          text: '智能评估',
          iconText: '🤖',
          pagePath: '/pages/smart-evaluation/index',
          selectedIcon: '',
          badge: '',
          dot: false
        },
        {
          text: '便民服务',
          iconText: '🛠️',
          pagePath: '/pages/tools/index',
          selectedIcon: '',
          badge: '3',
          dot: false
        },
        {
          text: '进度',
          iconText: '📊',
          pagePath: '/pages/progress-tracking/index',
          selectedIcon: '',
          badge: '',
          dot: true
        },
        {
          text: '我的',
          iconText: '👤',
          pagePath: '/pages/personal-center/index',
          selectedIcon: '',
          badge: '',
          dot: false
        }
      ]
    }
  },
  watch: {
    current(newVal) {
      this.currentIndex = newVal
    }
  },
  methods: {
    handleNavClick(index, item) {
      this.currentIndex = index
      this.$emit('change', {
        index,
        item
      })
      
      // 页面跳转
      if (item.pagePath) {
        routerManager.navigateTo(item.pagePath, {
          success: (res) => {
            console.log('底部导航跳转成功:', item.pagePath)
          },
          fail: (err) => {
            // 如果navigateTo失败，尝试reLaunch
            console.warn('navigateTo失败，尝试reLaunch:', err)
            routerManager.reLaunch(item.pagePath, {
              success: (res) => {
                console.log('底部导航reLaunch成功:', item.pagePath)
              },
              fail: (err) => {
                console.error('底部导航跳转完全失败:', err)
              }
            })
          }
        })
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.bottom-nav {
  position: relative;
  background: #ffffff;
  border-top: 1px solid #f0f0f0;
  box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1);
  z-index: 1000;
  
  &--fixed {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
  }
  
  &__container {
    display: flex;
    align-items: center;
    justify-content: space-around;
    padding: 8px 0;
    min-height: 60px;
  }
  
  &__item {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    flex: 1;
    padding: 4px 8px;
    cursor: pointer;
    transition: all 0.3s ease;
    border-radius: 8px;
    margin: 0 2px;
    
    &:hover {
      background: rgba(10, 36, 99, 0.05);
      transform: translateY(-1px);
    }
    
    &--active {
      .bottom-nav__icon-text {
        color: #0A2463;
        transform: scale(1.1);
      }
      
      .bottom-nav__text {
        color: #0A2463;
        font-weight: 600;
      }
    }
  }
  
  &__icon {
    position: relative;
    margin-bottom: 2px;
    
    &-img {
      width: 24px;
      height: 24px;
    }
    
    &-text {
      font-size: 20px;
      color: #6b7280;
      transition: all 0.3s ease;
      
      &--active {
        color: #0A2463;
        transform: scale(1.1);
      }
    }
  }
  
  &__text {
    font-size: 10px;
    color: #6b7280;
    text-align: center;
    line-height: 1.2;
    transition: all 0.3s ease;
    white-space: nowrap;
    
    &--active {
      color: #0A2463;
      font-weight: 600;
    }
  }
  
  &__badge {
    position: absolute;
    top: -2px;
    right: 8px;
    background: #ff4757;
    border-radius: 10px;
    min-width: 16px;
    height: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 4px;
    
    &-text {
      color: #ffffff;
      font-size: 10px;
      font-weight: 600;
      line-height: 1;
    }
  }
  
  &__dot {
    position: absolute;
    top: 2px;
    right: 12px;
    width: 6px;
    height: 6px;
    background: #ff4757;
    border-radius: 50%;
  }
  
  &__safe-area {
    height: env(safe-area-inset-bottom);
    background: #ffffff;
  }
}

// 主题色变体
.bottom-nav {
  &--theme-orange {
    .bottom-nav__item--active {
      .bottom-nav__icon-text,
      .bottom-nav__text {
        color: #FF6B35;
      }
    }
  }
  
  &--theme-green {
    .bottom-nav__item--active {
      .bottom-nav__icon-text,
      .bottom-nav__text {
        color: #00C851;
      }
    }
  }
  
  &--theme-purple {
    .bottom-nav__item--active {
      .bottom-nav__icon-text,
      .bottom-nav__text {
        color: #8B5CF6;
      }
    }
  }
}

// 响应式设计
@media (max-width: 480px) {
  .bottom-nav {
    &__container {
      padding: 6px 0;
      min-height: 56px;
    }
    
    &__item {
      padding: 2px 4px;
    }
    
    &__icon {
      &-text {
        font-size: 18px;
      }
      
      &-img {
        width: 22px;
        height: 22px;
      }
    }
    
    &__text {
      font-size: 9px;
    }
  }
}

@media (min-width: 768px) {
  .bottom-nav {
    &__container {
      padding: 10px 0;
      min-height: 64px;
    }
    
    &__icon {
      &-text {
        font-size: 22px;
      }
      
      &-img {
        width: 26px;
        height: 26px;
      }
    }
    
    &__text {
      font-size: 11px;
    }
  }
}

// 深色模式支持
@media (prefers-color-scheme: dark) {
  .bottom-nav {
    background: #1a1a1a;
    border-top-color: #333;
    
    &__item {
      &:hover {
        background: rgba(255, 255, 255, 0.05);
      }
    }
    
    &__text {
      color: #9ca3af;
      
      &--active {
        color: #60a5fa;
      }
    }
    
    &__icon-text {
      color: #9ca3af;
      
      &--active {
        color: #60a5fa;
      }
    }
    
    &__safe-area {
      background: #1a1a1a;
    }
  }
}
</style>